<template>
  <div class="pg-home">
    <div :class="headerShow ? 'pg-home--wrap' : 'pg-home--wrap hide'">
        <div>
          <!-- logo -->
          <header :class="headerShow ? 'pg-header' : 'pg-header bgColor'">
            <img class="logo" :src="require('@/assets/images/logo.png')" />
          </header>
          <!-- 顶部导航 -->
          <div :class="headerShow ? 'pg-nav--wrap bgColor':'pg-nav--wrap'">
            <ul class="pg-nav--container">
              <li class="nav-item" v-for="(items, indexs) in navList" :key="indexs">
                {{ items.lable }}
                <div class="popover--wrap" :style="{height: 50 * items.children.length + 'px'}">
                  <div class="popover">
                    <div 
                      class="popover-item" 
                      v-for="(item, index) in items.children" 
                      :key="index"
                      @click="() => handleClick(item.url)"
                    >{{ item.lable }}</div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- 轮播 -->
          <swiper
            class="pg-swiper"
            :options="swiperOption"
            @swiper="() => {}"
            @slideChange="() => {}"
          >
            <swiper-slide v-for="(item, index) in swiperList" :key="index">
              <img class="swpier-img" :src="item.img" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
          </swiper>
        </div>
      </div>
    <div class="pg-floor">
      <div class="title--wrap">
        <div class="title">重点关注</div>
      </div>
      <div class="floor1--container">
        <div class="left--container">
          <div class="img-container">
            <img class="img" :src="require('@/assets/images/swiper1.png')" />
          </div>
          <div class="item-right">
            <div>
              <div class="sub-title">{{ newsList[newsListIndex].title }}</div>
              <div class="description">{{ newsList[newsListIndex].desc }}</div>
            </div>
            <button class="detial-btn">查看详情</button>
          </div>
        </div>
        <div class="right--container">
          <div 
            class="news-item" 
            v-for="(item, index) in showNewsList" 
            :key="index"
            @click="handelChangeNews(item.id)"
          >
            <div class="time">{{ item.time }}</div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <div class="more">查看更多</div>
      <div class="floor2--wrap">
        <div class="title--wrap">
          <div class="title">新闻中心</div>
        </div>
        <div class="floor2-container">
          <div class="news-item" v-for="(item, index) in journalismList" :key="index">
            <div class="img--wrap">
              <img class="img" :src="item.img" />
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.desc }}</div>
            <div class="info">
              <div class="date">{{ item.date }}</div>
              <div class="look">{{ item.look }}</div>
            </div>
            <div class="detial-btn">查看详情</div>
          </div>
        </div>
        <div class="more">查看更多</div>
      </div>
      <div class="floor3--wrap">
        <div class="title--wrap">
          <div class="title">通知公告</div>
        </div>
        <div class="floor3-container">
          <transition name="enterleft" >
            <div class="row" v-if="floor3Show" >
                <div class="notice-item" v-for="(item, index) in noticeList[0]" :key="index">
                  <div class="title">{{ item.title }}</div>
                  <div class="info">
                    <div class="date">{{ item.date }}</div>
                    <div class="look">{{ item.look }}</div>
                  </div>
                  <img class="arrow" :src="require('../../assets/images/arrow-right.png')" />
                </div>
            </div>
          </transition>
          <transition name="enterright" >
            <div class="row" v-if="floor3Show">
                <div class="notice-item" v-for="(item, index) in noticeList[1]" :key="index">
                  <div class="title">{{ item.title }}</div>
                  <div class="info">
                    <div class="date">{{ item.date }}</div>
                    <div class="look">{{ item.look }}</div>
                  </div>
                  <img class="arrow" :src="require('../../assets/images/arrow-right.png')" />
                </div>
            </div>
          </transition>
        </div>
        <div class="more">查看更多</div>
        <div class="floor4-container">
          <div class="title--wrap">
            <div class="title">学术活动预告</div>
          </div>
          <div class="row--wrap">
            <transition name="entertop" >
              <div class="row" v-if="floor4Show">
                <div v-for="(item,index) in activityList" :key="index" class="activity-item">
                  <div class="tag">学术活动预告</div>
                  <div class="show-layer">
                    <div class="title">{{ item.title }}</div>
                    <img class="img" :src="item.img" />
                  </div>
                  <div class="hide-layer">
                    <div class="title">{{ item.title }}</div>
                    <div class="line-row">
                      <div class="label">时&nbsp;&nbsp;间： </div>
                      <div>{{ item.date }}</div>
                    </div>
                    <div class="line-row">
                      <div class="label">地&nbsp;&nbsp;点： </div>
                      <div>{{ item.address }}</div>
                    </div>
                    <div class="item-footer">
                      {{ item.time }}
                       <img class="arrow" :src="require('../../assets/images/arrow-right.png')" />
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <div class="more">查看更多</div>
        </div>
        <div class="floor5-wrap">
          <div class="title--wrap">
            <div class="title">学部印象</div>
          </div>
          <div class="floor5--container">
            <transition name="enterleft">
              <div class="img-wrap" v-if="floor5Show" >
                <div class="img-container first-img">
                  <img class="img" :src="impressionList[0].img" />
                  <div class="sub-title first-sub-title ellipsis">{{ impressionList[0].title }}</div>
                </div>
              </div>
            </transition>
            <transition name="enterright">
              <div class="right-img-block" v-if="floor5Show">
                <div v-for="(item, index) in impressionList" :key="index" class="img-wrap other-img" >
                  <div class="img-container">
                    <img class="img" :src="item.img" />
                    <div class="sub-title other-sub-title ellipsis">{{ item.title }}</div>
                  </div>
                </div>
              </div>
            </transition>
          </div>
          <div class="more">查看更多</div>
        </div>
        <div class="floor6-wrap">
          <div class="title--wrap">
            <div class="title">专题网站</div>
          </div>
          <div class="floor6-container-heigth">
            <transition name="entertop">
              <div v-if="floor6Show" class="floor6-container">
                <swiper
                  class="floor-swiper"
                  :options="bottomswiperOption"
                  @swiper="() => {}"
                  @slideChange="() => {}"
                >
                  <swiper-slide v-for="(item, index) in swiperList" :key="index">
                    <div class="swpier-img--wrap">
                      <img class="swpier-img" :src="item.img" />
                      <div class="tag">主题教育</div>
                    </div>
                  </swiper-slide>
                  <div class="swiper-button-prev" slot="button-prev"></div>
                  <div class="swiper-button-next" slot="button-next"></div>
                </swiper>
              </div>
            </transition>
          </div>
          <div class="more">查看更多</div>
        </div>
      </div>
    </div>
    <footer class="pg-footer">
      <div class="footer-container">
        <div class="footer-container-left">
          <div class="footer-list" v-for="(items,indexs) in footerList" :key="indexs">
            <div class="name">{{ items.name }}</div>
            <ul>
              <li class="sub-name" v-for="(item,index) in items.children" :key="index">{{ item.name }}</li>
            </ul>
          </div>
        </div>
        <div class="footer-container-right">
          <div class="title">
            <img class="wx-img" src="https://fe.bnu.edu.cn/static/html/images/a29.png" />
            学部公众号
          </div>
          <div class="qrcode-list--container">
            <div v-for="item in 6" :key="item" class="qrcode-item">
              <img class="img" src="https://fe.bnu.edu.cn/static/html/images/code01.jpeg" />
              <div>师大教育学部</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <img class="logo" src="https://fe.bnu.edu.cn/static/html/images/logo.png" />
        <p>版权所有：北京师范大学教育学部 电话：010-58808855 传真：010-58804057</p>
        <p>地址：北京市海淀区新街口外大街19号英东教育楼 邮编：100875 </p>
        <p>Copyright : 2020 Faculty Of Education,Beijing Normal University. All rights reserved.</p>
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 导航栏列表
      navList: [
        {
          lable: '学部概况',
          url: '#',
          children: [
            {lable: '学部简介', url: 'Demo'},
            {lable: '部长致辞', url: 'User'},
            {lable: '学部领导', url: '#'},
            {lable: '学科布局', url: '#'},
            {lable: '组织机构', url: '#'},
            {lable: '部旗部徽', url: '#'},
            {lable: '学校校历', url: '#'},
            {lable: '服务指南', url: '#'},
          ]
        },
        {
          lable: '招生信息',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
            {lable: '部长致辞', url: '#'},
            {lable: '学部领导', url: '#'},
            {lable: '学科布局', url: '#'},
          ]
        },
        {
          lable: '教育教学',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
            {lable: '部长致辞', url: '#'},
            {lable: '学部领导', url: '#'},
            {lable: '学科布局', url: '#'},
          ]
        },
        {
          lable: '师资队伍',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
          ]
        },
        {
          lable: '人才招聘',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
          ]
        },
        {
          lable: '学生园地',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
          ]
        },
        {
          lable: '科学研究',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
          ]
        },
        {
          lable: '国际交流',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
          ]
        },
        {
          lable: '社会服务',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
          ]
        },
        {
          lable: '党建工会',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
          ]
        },
        {
          lable: '校友风采',
          url: '#',
          children: [
            {lable: '学部简介', url: '#'},
          ]
        },
      ],
      // 轮播设置
      swiperOption: {
        slidesPerView: 1,
        // 设置分页器
        pagination: {
          el: '.swiper-pagination',
          // 设置点击可切换
          clickable: true
        },
        // 设置前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        // 设置自动轮播
        autoplay: {
          delay: 500000 // 5秒切换一次
        },
        // 设置轮播可循环
        loop: true
      },
      // 底部轮播设置
      bottomswiperOption: {
        slidesPerView: 3,
        // 设置前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
      },
      // 轮播图片列表
      swiperList: [
        {img: 'https://fe.bnu.edu.cn/upload_dir/topic/2023/04/17/1c59252b17bd4d36ab500f2db3be43c1.png'},
        {img: 'https://fe.bnu.edu.cn/upload_dir/topic/2023/04/17/1c59252b17bd4d36ab500f2db3be43c1.png'},
        {img: 'https://fe.bnu.edu.cn/upload_dir/topic/2023/04/17/1c59252b17bd4d36ab500f2db3be43c1.png'},
      ],
      // 重点关注新闻列表
      newsList: [
        {
          id: 0,
          img: require('@/assets/images/swiper1.png'),
          title: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          desc: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          time: '07月20日'
        },
        {
          id: 1,
          img: require('@/assets/images/swiper1.png'),
          title: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          desc: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          time: '08月20日'
        },
        {
          id: 2,
          img: require('@/assets/images/swiper1.png'),
          title: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          desc: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          time: '09月20日'
        },
        {
          id: 3,
          img: require('@/assets/images/swiper1.png'),
          title: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          desc: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          time: '10月20日'
        },
        {
          id: 4,
          img: require('@/assets/images/swiper1.png'),
          title: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          desc: '【招募启事】第十四届北京师范大学-京都大学研究生论坛',
          time: '11月20日'
        },
      ],
      // 页面展示的重点关注
      showNewsList: [],
      // 重点关注索引
      newsListIndex: 0,
      // 新闻列表
      journalismList: [
        {
          id: 1,
          img: require('@/assets/images/swiper1.png'),
          title: '“异地同心、共话教育”全球连线讲座第二十六场顺利开展',
          desc: '“异地同心、共话教育”全球连线讲座第二十六场顺利开展',
          date: '2023.06.12',
          look: 27
        },
        {
          id: 2,
          img: require('@/assets/images/swiper1.png'),
          title: '“异地同心、共话教育”全球连线讲座第二十六场顺利开展',
          desc: '“异地同心、共话教育”全球连线讲座第二十六场顺利开展',
          date: '2023.06.12',
          look: 28
        },
        {
          id: 3,
          img: require('@/assets/images/swiper1.png'),
          title: '“异地同心、共话教育”全球连线讲座第二十六场顺利开展',
          desc: '“异地同心、共话教育”全球连线讲座第二十六场顺利开展',
          date: '2023.06.12',
          look: 29
        },
        {
          id: 4,
          img: require('@/assets/images/swiper1.png'),
          title: '“异地同心、共话教育”全球连线讲座第二十六场顺利开展',
          desc: '“异地同心、共话教育”全球连线讲座第二十六场顺利开展',
          date: '2023.06.12',
          look: 270
        },
      ],
      // 通告列表
      noticeList: [
        [
          {id: 2, title: '关于2023年端午节放假的通知', date: '2023.06.01', look: 24},
          {id: 3, title: '关于2023年端午节放假的通知', date: '2023.06.01', look: 24},
          {id: 4, title: '关于2023年端午节放假的通知', date: '2023.06.01', look: 24},
          {id: 5, title: '关于2023年端午节放假的通知', date: '2023.06.01', look: 24},
        ],
        [
          {id: 6, title: '关于2023年端午节放假的通知', date: '2023.06.01', look: 24},
          {id: 7, title: '关于2023年端午节放假的通知', date: '2023.06.01', look: 24},
          {id: 8, title: '关于2023年端午节放假的通知', date: '2023.06.01', look: 24},
          {id: 9, title: '关于2023年端午节放假的通知', date: '2023.06.01', look: 24},
        ],
      ],
      // 学术活动预告
      activityList: [
        {
          title: '“共话中国教育现代化”百廿校庆系列学术讲座（第十五期）',
          img: require('@/assets/images/swiper1.png'),
          date: '2022年11月27日15:00-17:00',
          address: '南院京师科技大厦A座15层1502室',
          time: '2022/09/29'
        },
        {
          title: '“共话中国教育现代化”百廿校庆系列学术讲座（第十五期）',
          img: require('@/assets/images/swiper1.png'),
          date: '2022年11月27日15:00-17:00',
          address: '南院京师科技大厦A座15层1502室',
          time: '2022/09/29'
        },
        {
          title: '“共话中国教育现代化”百廿校庆系列学术讲座（第十五期）',
          img: require('@/assets/images/swiper1.png'),
          date: '2022年11月27日15:00-17:00',
          address: '南院京师科技大厦A座15层1502室',
          time: '2022/09/29'
        },
        {
          title: '“共话中国教育现代化”百廿校庆系列学术讲座（第十五期）',
          img: require('@/assets/images/swiper1.png'),
          date: '2022年11月27日15:00-17:00',
          address: '南院京师科技大厦A座15层1502室',
          time: '2022/09/29'
        },
        {
          title: '“共话中国教育现代化”百廿校庆系列学术讲座（第十五期）',
          img: require('@/assets/images/swiper1.png'),
          date: '2022年11月27日15:00-17:00',
          address: '南院京师科技大厦A座15层1502室',
          time: '2022/09/29'
        },
      ],
      // 学部印象列表
      impressionList: [
        {
          title: '顾明远：我的教育初心的来源——从感性到理性，从理性到实践',
          img: 'https://fe.bnu.edu.cn/upload_dir/news/2022/02/04/8a499fb505cb832982dfaa13ccd8c842.jpg'
        },
        {
          title: '顾明远：我的教育初心的来源——从感性到理性，从理性到实践',
          img: 'https://fe.bnu.edu.cn/upload_dir/news/2022/02/04/8a499fb505cb832982dfaa13ccd8c842.jpg'
        },
        {
          title: '顾明远：我的教育初心的来源——从感性到理性，从理性到实践',
          img: 'https://fe.bnu.edu.cn/upload_dir/news/2022/02/04/8a499fb505cb832982dfaa13ccd8c842.jpg'
        },
        {
          title: '顾明远：我的教育初心的来源——从感性到理性，从理性到实践',
          img: 'https://fe.bnu.edu.cn/upload_dir/news/2022/02/04/8a499fb505cb832982dfaa13ccd8c842.jpg'
        },
      ],
      // 底部列表
      footerList: [
        {
          name: '学部概况',
          url: '',
          children: [
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
          ]
        },
        {
          name: '学部概况',
          url: '',
          children: [
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
          ]
        },
        {
          name: '学部概况',
          url: '',
          children: [
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
          ]
        },
        {
          name: '学部概况',
          url: '',
          children: [
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
          ]
        },
        {
          name: '学部概况',
          url: '',
          children: [
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
          ]
        },
        {
          name: '学部概况',
          url: '',
          children: [
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
          ]
        },
        {
          name: '学部概况',
          url: '',
          children: [
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
            {name: '学部简介', url: ''},
          ]
        },
      ],
      // 加载动画
      headerShow: true,
      floor3Show: false,
      floor4Show: false,
      floor5Show: false,
      floor6Show: false,
    }
  },
  methods: {
    // 更新重点关注新闻展示
    handelChangeNews(id) {
      let _index = null
      this.newsList.find((item, index) => {
        if (item.id === id) _index = index
      })
      if (_index >= this.newsList.length - 1) return
      this.newsListIndex = _index
      this.showNewsList = [this.newsList[_index], this.newsList[_index + 1]]
    },
    // 滚动条事件
    handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollTop)
      if (scrollTop > 0) {
        this.headerShow = false
      }else {
        this.headerShow = true
      }
      if (scrollTop > 600) {
        // 设置通知公告动画
        this.floor3Show = true
      }else {
        this.floor3Show = false
      }
      if (scrollTop > 1150) {
        this.floor4Show = true
      }else {
        this.floor4Show = false
      }
      if (scrollTop > 1650) {
        this.floor5Show = true
      }else {
        this.floor5Show = false
      }
      if (scrollTop > 2200) {
        this.floor6Show = true
      }else {
        this.floor6Show = false
      }
    },
    handleClick(url) {
      this.$router.push({name: url})
    },
  },
  mounted() {
    this.handelChangeNews(this.newsList[0].id)
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed () {
    // 离开该页面需要移除这个监听的事件，不然会报错
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="less">
  .pg-header {
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    z-index: 100;
    &.bgColor {
      background: #fff;
    }
    .logo {
      width: 350px;
      height: 59px;
      margin-left: 12px;
    }
  }
  .pg-nav--wrap {
    position: absolute;
    z-index: 100;
    top: 80px;
    width: 100%;
    background: rgb(168, 38, 48);
    &.bgColor {
      background: inherit;
    }
    .pg-nav--container {
      display: flex;
      // width: 85%;
      // min-width: 940px;
      padding: 0 10px;
      justify-content: center;
      .nav-item {
        position: relative;
        width: 64px;
        height: 48px;
        line-height: 48px;
        margin: 0 10px;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        .popover--wrap {
          position: absolute;
          width: 120px;
          overflow: hidden;
          z-index: 999;
          .popover {
            height: 0%;
            text-align: center;
            line-height: 30px;
            background: rgba(0, 0, 0, .6);
            transition: all .3s;
            overflow: hidden;
            .popover-item {
              height: 50px;
              line-height: 50px;
              cursor: pointer;
              &:hover {
                color: #ddd;
              }
            }
          }
        }
        &:hover {
          .popover {
            height: 100%;
          }
          &::after {
            width: 100%;
          }
        }
        &::after {
          position: absolute;
          content: '';
          display: block;
          width: 0;
          height: 2px;
          background: #fff;
          bottom: 0px;
          transition: all .3s;
        }
      }
    }
  }
  .pg-home--wrap {
    position: relative;
    height: 100vh;
    overflow: hidden;
    transition: all .5s;
    &.hide {
      height: 128px
    }
  }
  .pg-swiper {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    .swpier-img {
      width: 100%;
      height: 100%;
    }
    .swiper-button-next,
    .swiper-button-prev {
      color: #fff;
    }
    .swiper-pagination-bullet {
      width: 22px;
      height: 3px;
      margin: 0 5px;
      border-radius: 0;
      background: #aaa;
      opacity: 1;
    }
    .swiper-pagination-bullet-active {
      background: #fff;
    }
  }
  .pg-floor {
    .title--wrap {
      padding: 35px 0 60px 0;
      .title {
        width: 150px;
        height: 33px;
        line-height: 33px;
        margin:  0 auto;
        font-size: 20px;
        color: #333;
        text-align: center;
        background: url('../../assets/images/titlebg.png') no-repeat;
        background-size: 100%;
      }
    }
    .floor1--container {
      display: flex;
      margin: 0 30px;
      .left--container {
        display: flex;
        width: 72%;
        height: 270px;
        box-shadow: 0px 0px 15px #dddddd;
        border-radius: 5px;
        padding-bottom: 30px;
        .img-container {
          flex: none;
          width: 50%;
          height: 100%;
          overflow: hidden;
          .img {
            width: 100%;
            height: 100%;
            cursor: pointer;
            transition: all .3s;
            &:hover {
              transform: scale(110%);
            }
          }
        }
        .item-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 60px 40px 0;
          .sub-title {
            font-size: 18px;
            color: #000;
            line-height: 26px;
            cursor: pointer;
            &:hover {
              color: #a82630;
            }
          }
          .description {
            color: #82899B;
            font-size: 14px;
            margin-top: 25px;
          }
        }
      }
      .right--container {
        width: 28%;
        .news-item {
          position: relative;
          display: flex;
          align-items: center;
          height: 148px;
          border: 1px solid #E2E3E5;
          padding: 0 20px;
          .time {
            position: absolute;
            width: 116px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 18px;
            color: #a82630;
            background: #F7EBEC;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            top: 0;
            left: 0;
          }
          .title {
            font-size: 18px;
            color: #000;
            line-height: 26px;
            margin-top: 20px;
            &::before {
              content: '·';
              margin-right: 5px;
            }
          }
        }
      }
    }
    .more {
      width: 110px;
      border-radius: 2px;
      height: 35px;
      line-height: 35px;
      color: #979cab;
      font-size: 12px;
      cursor: pointer;
      margin: 25px auto 30px auto;
      box-sizing: border-box;
      border: 1px solid #fff;
      text-align: center;
      &:hover {
        border-color: #000;
        color: #000;
      }
    }
    .detial-btn {
      width: 134px;
      height: 39px;
      font-size: 16px;
      line-height: 39px;
      text-align: center;
      padding: 0;
      border: none;
      background: #b32731;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
    }
    .info {
      display: flex;
      font-size: 14px;
      color: #82899B;
      margin: 20px 25px 0px 25px;
      .date {
        display: flex;
        align-items: center;
        margin-right: 20px;
        &::before {
          content: '';
          display: inline-block;
          width: 14px;
          height: 14px;
          background: url("../../assets/images/time.png") no-repeat;
          background-size: 100%;
          margin-right: 6px;
        }
      }
      .look {
        display: flex;
        align-items: center;
        &::before {
          content: '';
          display: inline-block;
          width: 14px;
          height: 12px;
          background: url("../../assets/images/look.png") no-repeat;
          background-size: 100%;
          margin-right: 6px;
        }
      }
    }
    .floor2--wrap {
      background: #F9FAFB;
      box-shadow: 0 0 15px #dddddd;
      padding-bottom: 1px;
      .floor2-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 30px;
        height: 400px;

        .news-item {
          width: 22%;
          height: 400px;
          margin: 10px 1.5%;
          border-radius: 5px;
          overflow: hidden;
          box-shadow: 0px 0px 10px #f5f5f5;
          padding-bottom: 20px;
          transition: all .3s;

          &:hover {
            height: 457px;
            box-shadow: 0px 0px 20px #dddddd;
            .img {
              transform: scale(110%);
            }
            .detial-btn {
              display: block;
            }
          }
        }
        .img--wrap {
          width: 100%;
          height: 172px;
          .img {
            width: 100%;
            height: 100%;
            transition: all .3s;
          }
        }
        .title {
          font-size: 18px;
          line-height: 26px;
          margin: 30px 25px 0px 25px;
        }
        .desc {
          font-size: 14px;
          color: #82899B;
          line-height: 22px;
          margin: 20px 25px 0px 25px;
        }
        .detial-btn {
          display: none;
          margin: 20px auto 0 auto;
        }
      }
      .more {
        margin-top: 75px;
      }
    }

    .floor3--wrap {
      background: #fff;
      box-shadow: 0 0 15px #dddddd;
      padding-bottom: 1px;
      .floor3-container {
        margin: 0 calc(1.5% + 30px);
        min-height: 200px;
        .row {
          display: flex;
          justify-content: space-between;
          border: 1px solid #E2E3E5;
          border-right: none;
          &:last-child {
            border-top: none;
          }
          .notice-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            width: 25%;
            height: 130px;
            border-right: 1px solid #E2E3E5;
            text-align: center;
            cursor: pointer;
            transition: all 1s ease-out 0s;
            .title {
              margin-top: 18px;
              font-size: 16px;
              line-height: 24px;
            }
            .info {
              justify-content: flex-start;
              margin: 0 0 8px 0;
              color: #0239A3;
            }
            .arrow {
              display: none;
              position: absolute;
              width: 36px;
              height: 18px;
              bottom: 2px;
              right: 2px;
            }
            &:hover {
              box-shadow: 0px 0px 15px #edcdcf;
              color: #a82630;
              .arrow {
                display: block;
              }
            }
          }
        }
      }
    }

    .floor4-container {
      background: #f6f1f1;
      padding: 0 calc(1.5% + 30px);
      padding-bottom: 1px;

      .row--wrap {
        min-height: 350px;
      }
      .row {
        display: flex;
        .activity-item {
          position: relative;
          width: 20%;
          height: 350px;
          background: #fff;
          cursor: pointer;
          .tag {
            position: absolute;
            display: flex;
            justify-content: center;
            width: 12px;
            height: 138px;
            background: #efdcdd;
            color: #74282d;
            font-size: 16px;
            top: -10px;
            left: 0;
            z-index: 10;
            padding: 10px;
            line-height: 23px;
          }
          .show-layer {
            display: block;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 25px;
            .title {
              font-size: 18px;
              line-height: 40px;
              color: #1B2B4F;
            }
            .img {
              width: 132px;
              height: 92px;
              margin-top: 30px;
            }
          }
          .hide-layer {
            display: none;
            height: 100%;
            box-sizing: border-box;
            padding: 20px 20px 0 40px;
            box-shadow: 0px 0px 15px #dddddd;
            .title {
              font-size: 18px;
              line-height: 30px;
              color: #161823;
              margin-bottom: 35px;
            }
            .line-row {
              display: flex;
              padding: 10px 0;
              border-bottom: 1px solid #f0f3f6;
              line-height: 22px;
              font-size: 13px;
              color: #1D2741;
              .label {
                width: 62px;
                font-size: 14px;
                color: #82899B;
                display: flex;
                flex: none;
                margin-right: 10px;
                &::before {
                  flex: none;
                  display: inline-block;
                  content: '';
                  width: 3px;
                  height: 14px;
                  margin-right: 5px;
                  background: rgb(168, 38, 48);
                }
              }
            }
          }
          .item-footer {
            display: flex;
            justify-content: space-between;
            margin: 35px -15px 0 0;

            .arrow {
              width: 28px;
              height: 14px;
            }
          }

          &:hover {
            .show-layer {
              display: none;
            }
            .hide-layer {
              display: block;
            }
          }
        }
      }
    }

    .floor5-wrap {
      .title {
        color: #fff;
      }
      padding: 0 calc(1.5% + 30px);
      padding-bottom: 1px;
      background: linear-gradient(to bottom, #B6333D, #710B13);

      .floor5--container {
        display: flex;
        min-height: 200px;
        .right-img-block {
          width: 48%;
          display: flex;
          flex-wrap: wrap;
        }
        
        .img-wrap {
          width: 52%;
          overflow: hidden;
          &:hover {
            box-shadow: 0px 0px 18px #04173b;
            .img-container {
              transform: scale(110%);
            }
          }
        }
        .img-container {
          position: relative;
          transition: all .8s;
          height: 100%;
          .img {
            width: 100%;
            height: 100%;
          }
          .sub-title {
            position: absolute;
            bottom: 0;
            color: #fff;
            height: 50px;
            box-sizing: border-box;
            background: url('https://fe.bnu.edu.cn/static/html/hred/images/a30.png');
          }
        }
        .first-sub-title {
          font-size: 24px;
          line-height: 50px;
          padding-left: 20px;
        }
        .other-sub-title {
          font-size: 16px;
          padding: 16px;
          line-height: 26px;
        }
        .other-img {
          width: 46%;
          margin: 5% 0 0 4%;
          &:nth-child(1) {
            margin-top: 0;
          }
          &:nth-child(2) {
            margin-top: 0;
          }
        }
      }

      .more {
        color: #fff;
        border-color: #710B13;
        &:hover {
          border: 1px solid #fff
        }
      }
    }
    .floor6-wrap {
      padding: 0 calc(1.5% + 30px);
      .floor6-container-heigth {
        min-height: 228px;
      }
      .floor6-container {
        .floor-swiper {
          .swpier-img--wrap {
            position: relative;
            
            text-align: center;
            .tag {
              position: absolute;
              padding: 0 15px;
              height: 40px;
              line-height: 40px;
              color: #fff;
              font-size: 16px;
              background: rgba(102,18,24,0.60);
              top: 10px;
              left: 10px;
            }
          }
          .swpier-img {
            width: 90%;
          }
          .swiper-button-prev,
          .swiper-button-next {
            width: 60px;
            height: 60px;
            color: #fff;
            background: rgba(0, 0, 0, .35);
            border-radius: 50%;
          }
          .swiper-button-prev {
            margin: -30px 0 0 -10px;
          }
          .swiper-button-next {
            margin: -30px -10px 00;
          }
        }
      }
    }
  }

  .pg-footer {
    background: #661218;
    padding: 50px calc(1.5% + 30px);

    .footer-container {
      display: flex;
      justify-content: space-between;
      color: #fff;
      .footer-container-left {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        .footer-list {
          margin-right: 6%;
        }
        .name {
          font-size: 14px;
          cursor: pointer;
          line-height: 20px;
          margin-bottom: 10px;
        }
        .sub-name {
          font-size: 12px;
          cursor: pointer;
          line-height: 12px;
          margin-bottom: 16px;
          color: #d9c4c8;
          &:hover {
            color: #fff;
          }
        }
      }
      .footer-container-right{
        width: 20%;
        flex: none;
        .title {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          line-height: 30px;
          .wx-img {
            width: 30px;
            margin-right: 10px;
          }
        }
        .qrcode-list--container {
          display: flex;
          flex-wrap: wrap;
          .qrcode-item {
            width: 40%;
            margin: 20px 5% 0px 5%;
            text-align: center;
            font-size: 12px;
            .img {
              margin-bottom: 10px;
              width: 100%;
            }
          }
        }
      }

    }
    .footer-bottom {
      color: #fff;
      .logo {
        width: 300px;
        margin-bottom: 50px;
      }
      p {
        font-size: 12px;
        padding: 6px 0;
        line-height: 22px;
      }
    }
  }
  .ellipsis {
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden;
    text-overflow:ellipsis;
  }

@keyframes donghua {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes donghua2 {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes donghua3 {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes donghua4 {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(-100px);
    opacity: 0;
  }
}
@keyframes donghua5 {
  0% {
    transform: translateX(0px);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}
@keyframes donghua6 {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(100px);
    opacity: 0;
  }
}
@keyframes donghua7 {
  0% {
    height: 100vh;
  }
  100% {
    height: 0vh
  }
}
@keyframes donghua8 {
  0% {
    height: 0vh;
  }
  100% {
    height: 100vh;
  }
}
.enterleft-enter-active {
  animation: donghua 1s;
}
.enterleft-leave-active {
  animation: donghua4 1s;
}
.enterright-enter-active {
  animation: donghua3 1s;
}
.enterright-leave-active {
  animation: donghua5 1s;
}
.entertop-enter-active {
  animation: donghua2 1s;
}
.entertop-leave-active {
  animation: donghua6 1s;
}

.header-enter-active {
  animation: donghua8 .3s;
}
.header-leave-active {
  animation: donghua7 .3s;
}

</style>